﻿<script setup lang="ts" name="Charts">
import { getEchartsData } from '@/api/echarts'
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'

import useLineChartOptions from '@/hooks/charts/lineCharts/lineChart'
import useLineGroupChartOptions from '@/hooks/charts/lineCharts/lineGroupChart'
import useLineStackChartOptions from '@/hooks/charts/lineCharts/lineStackChart'
import useLineHorizontalGradientChartOptions from '@/hooks/charts/lineCharts/lineHorizontalGradientChart'
import useLineVerticalGradientChartOptions from '@/hooks/charts/lineCharts/lineVerticalGradientChart'
import useLineBeautifyChartOptions from '@/hooks/charts/lineCharts/lineBeautifyChart'

import useAreaChartOptions from '@/hooks/charts/lineCharts/areaChart'
import useAreaGroupChartOptions from '@/hooks/charts/lineCharts/areaGroupChart'
import useAreaStackChartOptions from '@/hooks/charts/lineCharts/areaStackChart'
import useAreaGradientChartOptions from '@/hooks/charts/lineCharts/areaGradientChart'

import useColumnChartOptions from '@/hooks/charts/barCharts/columnChart'
import useColumnGroupChartOptions from '@/hooks/charts/barCharts/columnGroupChart'
import useColumnStackChartOptions from '@/hooks/charts/barCharts/columnStackChart'
import useColumnGroupStackChartOptions from '@/hooks/charts/barCharts/columnGroupStackChart'
import useColumnGradientChartOptions from '@/hooks/charts/barCharts/columnGradientChart'

import useBarChartOptions from '@/hooks/charts/barCharts/barChart'
import useBarGroupChartOptions from '@/hooks/charts/barCharts/barGroupChart'
import useBarStackChartOptions from '@/hooks/charts/barCharts/barStackChart'
import useBarGroupStackChartOptions from '@/hooks/charts/barCharts/barGroupStackChart'
import useBarGradientChartOptions from '@/hooks/charts/barCharts/barGradientChart'
import useBarRankChartOptions from '@/hooks/charts/barCharts/barRankChart'
import useBarRankPiecewiseChartOptions from '@/hooks/charts/barCharts/barRankPiecewiseChart'

import usePieChartOptions from '@/hooks/charts/pieCharts/pieChart'
import usePieDoughnutChartOptions from '@/hooks/charts/pieCharts/pieDoughnutChart'
import usePieNightingaleChartOptions from '@/hooks/charts/pieCharts/pieNightingaleChart'

import useWorldMapChartOptions from '@/hooks/charts/mapCharts/mapWorldChart'
import useWorldZhMapChartOptions from '@/hooks/charts/mapCharts/mapWorldZhChart'
import useChinaMapChartOptions from '@/hooks/charts/mapCharts/mapChinaChart'
import useChinaWorldMapChartOptions from '@/hooks/charts/mapCharts/mapChinaWorldChart'

import useRadarChartOptions from '@/hooks/charts/radarCharts/radarChart'
import useRadarGroupChartOptions from '@/hooks/charts/radarCharts/radarGroupChart'
import useRadarGroupAreaChartOptions from '@/hooks/charts/radarCharts/radarGroupAreaChart'

import useFunnelChartOptions from '@/hooks/charts/funnelCharts/funnelChart'

import useGaugeProgressChartOptions from '@/hooks/charts/gaugeCharts/gaugeProgressChart'
import useGaugeSegmentChartOptions from '@/hooks/charts/gaugeCharts/gaugeSegmentChart'

import useColumnSvgChartOptions from '@/hooks/charts/pictorialBarCharts/columnSvgChart'
import useColumnImgChartOptions from '@/hooks/charts/pictorialBarCharts/columnImgChart'

import useBarSvgChartOptions from '@/hooks/charts/pictorialBarCharts/barSvgChart'

import useColumn3dChartOptions from '@/hooks/charts/otherCharts/column3dChart'

import useLineColumn3dChartOptions from '@/hooks/charts/otherCharts/lineColumn3dChart'

import type { EChartsOption, SeriesOption } from 'echarts'
import { horizontalGradientVisualMap, verticalGradientVisualMap, seriesLineGradientOptions, seriesAreaGradientOptions, seriesColumnGradientOptions, seriesBarGradientOptions, rankContinuousVisualMap, rankPiecewiseVisualMap, initPieThemeOptions } from '@/hooks/charts/utils'
import { seriesColumnSvgOptions } from '@/hooks/charts/pictorialBarCharts/utils'
import { column3dThemeOptions } from '@/hooks/charts/otherCharts/utils'
import { gaugeProgressThemeOptions } from '@/hooks/charts/gaugeCharts/utils'
import { radarChartThemeChange } from '@/hooks/charts/radarCharts/utils'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig, language } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const lineChartInitOptions = ref<EChartsOption>()

const lineGroupChartInitOptions = ref<EChartsOption>()
const lineGroupChartCustomSeriesOptions = ref<SeriesOption>()

const lineStackChartInitOptions = ref<EChartsOption>()
const lineStackChartCustomSeriesOptions = ref<SeriesOption>()

const lineHorizontalGradientChartInitOptions = ref<EChartsOption>()
const lineHorizontalGradientChartCustomSeriesOptions = ref<SeriesOption>()

const lineVerticalGradientChartInitOptions = ref<EChartsOption>()
const lineVerticalGradientChartCustomSeriesOptions = ref<SeriesOption>()

const lineBeautifyChartInitOptions = ref<EChartsOption>()
const lineBeautifyChartCustomSeriesOptions = ref<SeriesOption>()

const areaChartInitOptions = ref<EChartsOption>()
const areaChartCustomSeriesOptions = ref<SeriesOption>()

const areaGroupChartInitOptions = ref<EChartsOption>()
const areaGroupChartCustomSeriesOptions = ref<SeriesOption>()

const areaStackChartInitOptions = ref<EChartsOption>()
const areaStackChartCustomSeriesOptions = ref<SeriesOption>()

const areaGradientChartInitOptions = ref<EChartsOption>()
const areaGradientChartCustomSeriesOptions = ref<SeriesOption>()

const columnChartInitOptions = ref<EChartsOption>()

const columnGroupChartInitOptions = ref<EChartsOption>()

const columnStackChartInitOptions = ref<EChartsOption>()
const columnStackChartCustomSeriesOptions = ref<SeriesOption>()

const columnGroupStackChartInitOptions = ref<EChartsOption>()

const columnGradientChartInitOptions = ref<EChartsOption>()
const columnGradientChartCustomSeriesOptions = ref<SeriesOption>()

const barChartInitOptions = ref<EChartsOption>()
const barChartCustomSeriesOptions = ref<SeriesOption>()

const barGroupChartInitOptions = ref<EChartsOption>()
const barGroupChartCustomSeriesOptions = ref<SeriesOption>()

const barStackChartInitOptions = ref<EChartsOption>()
const barStackChartCustomSeriesOptions = ref<SeriesOption>()

const barGroupStackChartInitOptions = ref<EChartsOption>()

const barGradientChartInitOptions = ref<EChartsOption>()
const barGradientChartCustomSeriesOptions = ref<SeriesOption>()

const barRankChartInitOptions = ref<EChartsOption>()

const barRankPiecewiseChartInitOptions = ref<EChartsOption>()

const pieChartInitOptions = ref<EChartsOption>()

const pieDoughnutChartInitOptions = ref<EChartsOption>()

const pieNightingaleChartInitOptions = ref<EChartsOption>()

const worldMapChartInitOptions = ref<EChartsOption>()

const worldZhMapChartInitOptions = ref<EChartsOption>()

const chinaMapChartInitOptions = ref<EChartsOption>()

const chinaWorldMapChartInitOptions = ref<EChartsOption>()

const radarChartInitOptions = ref<EChartsOption>()

const radarGroupChartInitOptions = ref<EChartsOption>()

const radarGroupAreaChartInitOptions = ref<EChartsOption>()

const funnelChartInitOptions = ref<EChartsOption>()

const gaugeProgressChartInitOptions = ref<EChartsOption>()

const gaugeSegmentChartInitOptions = ref<EChartsOption>()

const columnSvgChartInitOptions = ref<EChartsOption>()
const columnSvgChartCustomSeriesOptions = ref<SeriesOption>()

const columnImgChartInitOptions = ref<EChartsOption>()

const barSvgChartInitOptions = ref<EChartsOption>()

const column3dChartInitOptions = ref<EChartsOption>()
const lineColumn3dChartInitOptions = ref<EChartsOption>()

const getInitData = async () => {
  getEchartsData(null, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    console.log(res)
    if (res.data) {
      const { lineInitOptions } = useLineChartOptions(res.data.oneLineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line'] })
      lineChartInitOptions.value = lineInitOptions

      const { lineGroupInitOptions, lineGroupCustomSeriesOptions } = useLineGroupChartOptions(res.data.lineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line', 'line'] })
      lineGroupChartInitOptions.value = lineGroupInitOptions
      lineGroupChartCustomSeriesOptions.value = lineGroupCustomSeriesOptions

      const { lineStackInitOptions, lineStackCustomSeriesOptions } = useLineStackChartOptions(res.data.lineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line', 'line'] })
      lineStackChartInitOptions.value = lineStackInitOptions
      lineStackChartCustomSeriesOptions.value = lineStackCustomSeriesOptions

      const { lineHorizontalGradientInitOptions, lineHorizontalGradientCustomSeriesOptions } = useLineHorizontalGradientChartOptions(res.data.lineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line', 'line'] }, systemConfig)
      lineHorizontalGradientChartInitOptions.value = lineHorizontalGradientInitOptions
      lineHorizontalGradientChartCustomSeriesOptions.value = lineHorizontalGradientCustomSeriesOptions

      const { lineVerticalGradientInitOptions, lineVerticalGradientCustomSeriesOptions } = useLineVerticalGradientChartOptions(res.data.lineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line', 'line'] }, systemConfig)
      lineVerticalGradientChartInitOptions.value = lineVerticalGradientInitOptions
      lineVerticalGradientChartCustomSeriesOptions.value = lineVerticalGradientCustomSeriesOptions

      const { lineBeautifyInitOptions, lineBeautifyCustomSeriesOptions } = useLineBeautifyChartOptions(res.data.lineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line', 'line'] }, systemConfig)
      lineBeautifyChartInitOptions.value = lineBeautifyInitOptions
      lineBeautifyChartCustomSeriesOptions.value = lineBeautifyCustomSeriesOptions

      const { areaInitOptions, areaCustomSeriesOptions } = useAreaChartOptions(res.data.oneLineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line'] })
      areaChartInitOptions.value = areaInitOptions
      areaChartCustomSeriesOptions.value = areaCustomSeriesOptions

      const { areaGroupInitOptions, areaGroupCustomSeriesOptions } = useAreaGroupChartOptions(res.data.lineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line', 'line'] })
      areaGroupChartInitOptions.value = areaGroupInitOptions
      areaGroupChartCustomSeriesOptions.value = areaGroupCustomSeriesOptions

      const { areaStackInitOptions, areaStackCustomSeriesOptions } = useAreaStackChartOptions(res.data.lineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line', 'line'] })
      areaStackChartInitOptions.value = areaStackInitOptions
      areaStackChartCustomSeriesOptions.value = areaStackCustomSeriesOptions

      const { areaGradientInitOptions, areaGradientCustomSeriesOptions } = useAreaGradientChartOptions(res.data.lineData, { type: 'type', axis: 'date', value: 'num', chartType: ['line', 'line'] }, systemConfig)
      areaGradientChartInitOptions.value = areaGradientInitOptions
      areaGradientChartCustomSeriesOptions.value = areaGradientCustomSeriesOptions

      const { columnInitOptions } = useColumnChartOptions(res.data.oneColumnData, { type: 'type', axis: 'date', value: 'num', chartType: ['bar'] })
      columnChartInitOptions.value = columnInitOptions

      const { columnGroupInitOptions } = useColumnGroupChartOptions(res.data.columnData, { type: 'type', axis: 'date', value: 'num', chartType: ['bar', 'bar'] })
      columnGroupChartInitOptions.value = columnGroupInitOptions

      const { columnStackInitOptions, columnStackCustomSeriesOptions } = useColumnStackChartOptions(res.data.columnData, { type: 'type', axis: 'date', value: 'num', chartType: ['bar', 'bar'] })
      columnStackChartInitOptions.value = columnStackInitOptions
      columnStackChartCustomSeriesOptions.value = columnStackCustomSeriesOptions

      const { columnGroupStackInitOptions } = useColumnGroupStackChartOptions(res.data.groupStackData, { class: 'class', type: 'type', axis: 'date', value: 'num', stack: 'class', chartType: ['bar'] })
      columnGroupStackChartInitOptions.value = columnGroupStackInitOptions

      const { columnGradientInitOptions, columnGradientCustomSeriesOptions } = useColumnGradientChartOptions(res.data.oneColumnData, { type: 'type', axis: 'date', value: 'num', chartType: ['bar'] }, systemConfig)
      columnGradientChartInitOptions.value = columnGradientInitOptions
      columnGradientChartCustomSeriesOptions.value = columnGradientCustomSeriesOptions

      const { barInitOptions, barCustomSeriesOptions } = useBarChartOptions(res.data.oneBarData, { type: 'date', axis: 'type', value: 'num', chartType: ['bar'] })
      barChartInitOptions.value = barInitOptions
      barChartCustomSeriesOptions.value = barCustomSeriesOptions

      const { barGroupInitOptions, barGroupCustomSeriesOptions } = useBarGroupChartOptions(res.data.barData, { type: 'date', axis: 'type', value: 'num', chartType: ['bar', 'bar'] })
      barGroupChartInitOptions.value = barGroupInitOptions
      barGroupChartCustomSeriesOptions.value = barGroupCustomSeriesOptions

      const { barStackInitOptions, barStackCustomSeriesOptions } = useBarStackChartOptions(res.data.barData, { type: 'date', axis: 'type', value: 'num', chartType: ['bar', 'bar'] })
      barStackChartInitOptions.value = barStackInitOptions
      barStackChartCustomSeriesOptions.value = barStackCustomSeriesOptions

      const { barGroupStackInitOptions } = useBarGroupStackChartOptions(res.data.groupStackData, { class: 'class', type: 'type', axis: 'date', value: 'num', stack: 'class', chartType: ['bar'] })
      barGroupStackChartInitOptions.value = barGroupStackInitOptions

      const { barGradientInitOptions, barGradientCustomSeriesOptions } = useBarGradientChartOptions(res.data.oneBarData, { type: 'date', axis: 'type', value: 'num', chartType: ['bar'] }, systemConfig)
      barGradientChartInitOptions.value = barGradientInitOptions
      barGradientChartCustomSeriesOptions.value = barGradientCustomSeriesOptions

      const { barRankInitOptions } = useBarRankChartOptions(res.data.oneBarData, { type: 'date', axis: 'type', value: 'num', chartType: ['bar'] }, systemConfig)
      barRankChartInitOptions.value = barRankInitOptions

      const { barRankPiecewiseInitOptions } = useBarRankPiecewiseChartOptions(res.data.oneBarData, { type: 'date', axis: 'type', value: 'num', chartType: ['bar'] }, systemConfig)
      barRankPiecewiseChartInitOptions.value = barRankPiecewiseInitOptions

      const { pieInitOptions } = usePieChartOptions(res.data.pieData, { type: 'type', axis: 'date', value: 'num', chartType: ['pie'] }, systemConfig)
      pieChartInitOptions.value = pieInitOptions

      const { pieDoughnutInitOptions } = usePieDoughnutChartOptions(res.data.pieData, { type: 'type', axis: 'date', value: 'num', chartType: ['pie'] }, systemConfig)
      pieDoughnutChartInitOptions.value = pieDoughnutInitOptions

      const { pieNightingaleInitOptions } = usePieNightingaleChartOptions(res.data.pieData, { type: 'type', axis: 'date', value: 'num', chartType: ['pie'] }, systemConfig)
      pieNightingaleChartInitOptions.value = pieNightingaleInitOptions

      const { worldMapInitOptions } = useWorldMapChartOptions(res.data.worldData, { type: 'country', value: 'num', map: 'world', visualMap: 'piecewise', isPrimary: true }, systemConfig)
      worldMapChartInitOptions.value = worldMapInitOptions

      const { worldZhMapInitOptions } = useWorldZhMapChartOptions(res.data.worldData, { type: 'country', value: 'num', map: 'worldZH', visualMap: 'continuous', isPrimary: false }, systemConfig)
      worldZhMapChartInitOptions.value = worldZhMapInitOptions

      const { chinaMapInitOptions } = useChinaMapChartOptions(res.data.chinaData, { type: 'name', value: 'num', map: 'china', visualMap: 'continuous', isPrimary: true }, systemConfig)
      chinaMapChartInitOptions.value = chinaMapInitOptions

      const { chinaWorldMapInitOptions } = useChinaWorldMapChartOptions(res.data.chinaData, { type: 'name', value: 'num', map: 'chinaWorld', visualMap: 'piecewise', isPrimary: false }, systemConfig)
      chinaWorldMapChartInitOptions.value = chinaWorldMapInitOptions

      const { radarInitOptions } = useRadarChartOptions(res.data.radar4Data, { radar: 'type', type: 'name', value: 'num' }, systemConfig)
      radarChartInitOptions.value = radarInitOptions

      const { radarGroupInitOptions } = useRadarGroupChartOptions(res.data.radar5Data, { radar: 'type', type: 'name', value: 'num' }, systemConfig)
      radarGroupChartInitOptions.value = radarGroupInitOptions

      const { radarGroupAreaInitOptions } = useRadarGroupAreaChartOptions(res.data.radar6Data, { radar: 'type', type: 'name', value: 'num' }, systemConfig)
      radarGroupAreaChartInitOptions.value = radarGroupAreaInitOptions

      const { funnelInitOptions } = useFunnelChartOptions(res.data.funnelData, { type: 'type', value: 'num' })
      funnelChartInitOptions.value = funnelInitOptions

      const { gaugeProgressInitOptions } = useGaugeProgressChartOptions(res.data.gaugeProgressData, { value: 'num' }, systemConfig)
      gaugeProgressChartInitOptions.value = gaugeProgressInitOptions

      const { gaugeSegmentInitOptions } = useGaugeSegmentChartOptions(res.data.gaugeData, { value: 'num' })
      gaugeSegmentChartInitOptions.value = gaugeSegmentInitOptions

      const { columnSvgInitOptions, columnSvgCustomSeriesOptions } = useColumnSvgChartOptions(res.data.oneColumnData, { type: 'type', axis: 'date', value: 'num', chartType: ['pictorialBar'] }, systemConfig)
      columnSvgChartInitOptions.value = columnSvgInitOptions
      columnSvgChartCustomSeriesOptions.value = columnSvgCustomSeriesOptions

      const { columnImgInitOptions } = useColumnImgChartOptions(res.data.oneColumnData, { type: 'type', axis: 'date', value: 'num', chartType: ['pictorialBar'] })
      columnImgChartInitOptions.value = columnImgInitOptions

      const { barSvgInitOptions } = useBarSvgChartOptions(res.data.oneBarData, { type: 'date', axis: 'type', value: 'num' })
      barSvgChartInitOptions.value = barSvgInitOptions

      const { column3dInitOptions } = useColumn3dChartOptions(res.data.oneColumnData, { type: 'type', axis: 'date', value: 'num' }, systemConfig)
      column3dChartInitOptions.value = column3dInitOptions

      const { lineColumn3dInitOptions } = useLineColumn3dChartOptions(res.data.lineColumnData, { axis: 'date', columnValue: 'num', lineValue: 'percentage' }, systemConfig)
      lineColumn3dChartInitOptions.value = lineColumn3dInitOptions
    }
  })
}
getInitData()

watch(
  () => systemConfig.value.primaryColor,
  () => {
    chartThemeWatcher()
  }
)
watch(
  () => systemConfig.value.isLight,
  () => {
    chartThemeWatcher()
  }
)
watch(
  () => language.value,
  () => {
    chartThemeWatcher()
  }
)
const chartThemeWatcher = () => {
  lineHorizontalGradientChartInitOptions.value = horizontalGradientVisualMap(lineHorizontalGradientChartInitOptions, systemConfig)
  lineVerticalGradientChartInitOptions.value = verticalGradientVisualMap(lineVerticalGradientChartInitOptions, systemConfig)
  lineBeautifyChartCustomSeriesOptions.value = seriesLineGradientOptions(lineBeautifyChartInitOptions, systemConfig)
  areaGradientChartCustomSeriesOptions.value = seriesAreaGradientOptions(areaGradientChartInitOptions, systemConfig)
  columnGradientChartCustomSeriesOptions.value = seriesColumnGradientOptions(columnGradientChartInitOptions, systemConfig)
  barGradientChartCustomSeriesOptions.value = seriesBarGradientOptions(barGradientChartInitOptions, systemConfig)
  barRankChartInitOptions.value = rankContinuousVisualMap(barRankChartInitOptions, systemConfig)
  barRankPiecewiseChartInitOptions.value = rankPiecewiseVisualMap(barRankPiecewiseChartInitOptions, systemConfig)
  pieChartInitOptions.value = initPieThemeOptions(pieChartInitOptions, systemConfig)
  pieDoughnutChartInitOptions.value = initPieThemeOptions(pieDoughnutChartInitOptions, systemConfig)
  pieNightingaleChartInitOptions.value = initPieThemeOptions(pieNightingaleChartInitOptions, systemConfig)
  worldMapChartInitOptions.value = rankPiecewiseVisualMap(worldMapChartInitOptions, systemConfig, true, true)
  worldZhMapChartInitOptions.value = rankContinuousVisualMap(worldZhMapChartInitOptions, systemConfig, true, false)
  chinaMapChartInitOptions.value = rankContinuousVisualMap(chinaMapChartInitOptions, systemConfig, true, true)
  chinaWorldMapChartInitOptions.value = rankPiecewiseVisualMap(chinaWorldMapChartInitOptions, systemConfig, true, false)
  radarChartInitOptions.value = radarChartThemeChange(radarChartInitOptions, systemConfig)
  radarGroupChartInitOptions.value = radarChartThemeChange(radarGroupChartInitOptions, systemConfig)
  radarGroupAreaChartInitOptions.value = radarChartThemeChange(radarGroupAreaChartInitOptions, systemConfig)
  gaugeProgressChartInitOptions.value = gaugeProgressThemeOptions(gaugeProgressChartInitOptions, systemConfig)
  columnSvgChartCustomSeriesOptions.value = seriesColumnSvgOptions(columnSvgChartInitOptions, systemConfig)
  column3dChartInitOptions.value = column3dThemeOptions(column3dChartInitOptions, systemConfig)
}
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-alert title="封装40个常规echart图表，包含折线图、面积图、柱状图、条形图、饼图、环图、世界地图、中国中心的世界地图、中国地图、包含边界国家的中国地图、雷达图、漏斗图、仪表盘、象形图、三维图、折柱混合图等。" type="success" :closable="false" show-icon />
    <el-row :gutter="systemConfig.space">
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>折线图-基础</span>
            </div>
          </template>
          <e-chart v-if="lineChartInitOptions" :options="lineChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>折线图-分组</span>
            </div>
          </template>
          <e-chart v-if="lineGroupChartInitOptions" :options="lineGroupChartInitOptions" :customSeriesOptions="lineGroupChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>折线图-堆叠</span>
            </div>
          </template>
          <e-chart v-if="lineStackChartInitOptions" :options="lineStackChartInitOptions" :customSeriesOptions="lineStackChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>折线图-堆叠-横向渐变</span>
            </div>
          </template>
          <e-chart v-if="lineHorizontalGradientChartInitOptions" :options="lineHorizontalGradientChartInitOptions" :customSeriesOptions="lineHorizontalGradientChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>折线图-纵向渐变</span>
            </div>
          </template>
          <e-chart v-if="lineVerticalGradientChartInitOptions" :options="lineVerticalGradientChartInitOptions" :customSeriesOptions="lineVerticalGradientChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>折线图-美化</span>
            </div>
          </template>
          <e-chart v-if="lineBeautifyChartInitOptions" :options="lineBeautifyChartInitOptions" :customSeriesOptions="lineBeautifyChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>面积图-基础</span>
            </div>
          </template>
          <e-chart v-if="areaChartInitOptions" :options="areaChartInitOptions" :customSeriesOptions="areaChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>面积图-分组</span>
            </div>
          </template>
          <e-chart v-if="areaGroupChartInitOptions" :options="areaGroupChartInitOptions" :customSeriesOptions="areaGroupChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>面积图-堆叠</span>
            </div>
          </template>
          <e-chart v-if="areaStackChartInitOptions" :options="areaStackChartInitOptions" :customSeriesOptions="areaStackChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>面积图-渐变</span>
            </div>
          </template>
          <e-chart v-if="areaGradientChartInitOptions" :options="areaGradientChartInitOptions" :customSeriesOptions="areaGradientChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>柱状图-基础</span>
            </div>
          </template>
          <e-chart v-if="columnChartInitOptions" :options="columnChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>柱状图-分组</span>
            </div>
          </template>
          <e-chart v-if="columnGroupChartInitOptions" :options="columnGroupChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>柱状图-堆叠</span>
            </div>
          </template>
          <e-chart v-if="columnStackChartInitOptions" :options="columnStackChartInitOptions" :customSeriesOptions="columnStackChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>柱状图-分组-堆叠</span>
            </div>
          </template>
          <e-chart v-if="columnGroupStackChartInitOptions" :options="columnGroupStackChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>柱状图-渐变</span>
            </div>
          </template>
          <e-chart v-if="columnGradientChartInitOptions" :options="columnGradientChartInitOptions" :customSeriesOptions="columnGradientChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>条形图-基础</span>
            </div>
          </template>
          <e-chart v-if="barChartInitOptions" :options="barChartInitOptions" :customSeriesOptions="barChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>条形图-分组</span>
            </div>
          </template>
          <e-chart v-if="barGroupChartInitOptions" :options="barGroupChartInitOptions" :customSeriesOptions="barGroupChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>条形图-堆叠</span>
            </div>
          </template>
          <e-chart v-if="barStackChartInitOptions" :options="barStackChartInitOptions" :customSeriesOptions="barStackChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>条形图-分组-堆叠</span>
            </div>
          </template>
          <e-chart v-if="barGroupStackChartInitOptions" :options="barGroupStackChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>条形图-渐变</span>
            </div>
          </template>
          <e-chart v-if="barGradientChartInitOptions" :options="barGradientChartInitOptions" :customSeriesOptions="barGradientChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>条形图-视觉映射-连续</span>
            </div>
          </template>
          <e-chart v-if="barRankChartInitOptions" :options="barRankChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>条形图-视觉映射-分段</span>
            </div>
          </template>
          <e-chart v-if="barRankPiecewiseChartInitOptions" :options="barRankPiecewiseChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>饼图-基础</span>
            </div>
          </template>
          <e-chart v-if="pieChartInitOptions" :options="pieChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>饼图-环形</span>
            </div>
          </template>
          <e-chart v-if="pieDoughnutChartInitOptions" :options="pieDoughnutChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>饼图-南丁格尔</span>
            </div>
          </template>
          <e-chart v-if="pieNightingaleChartInitOptions" :options="pieNightingaleChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>地图-世界地图-欧洲中心</span>
            </div>
          </template>
          <e-chart v-if="worldMapChartInitOptions" :options="worldMapChartInitOptions" map="world" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>地图-世界地图-中国中心</span>
            </div>
          </template>
          <e-chart v-if="worldZhMapChartInitOptions" :options="worldZhMapChartInitOptions" map="worldZH" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>地图-中国地图</span>
            </div>
          </template>
          <e-chart v-if="chinaMapChartInitOptions" :options="chinaMapChartInitOptions" map="china" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card class="no-padding" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>地图-中国地图-包含边界国家</span>
            </div>
          </template>
          <e-chart v-if="chinaWorldMapChartInitOptions" :options="chinaWorldMapChartInitOptions" map="chinaWorld" :height="280"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>雷达图-四边形</span>
            </div>
          </template>
          <e-chart v-if="radarChartInitOptions" :options="radarChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>雷达图-五边形-分组</span>
            </div>
          </template>
          <e-chart v-if="radarGroupChartInitOptions" :options="radarGroupChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>雷达图-六边形-分组-面积</span>
            </div>
          </template>
          <e-chart v-if="radarGroupAreaChartInitOptions" :options="radarGroupAreaChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>漏斗图-基础</span>
            </div>
          </template>
          <e-chart v-if="funnelChartInitOptions" :options="funnelChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>仪表盘-进度条</span>
            </div>
          </template>
          <e-chart v-if="gaugeProgressChartInitOptions" :options="gaugeProgressChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>仪表盘-分段</span>
            </div>
          </template>
          <e-chart v-if="gaugeSegmentChartInitOptions" :options="gaugeSegmentChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>象形图-svg柱图</span>
            </div>
          </template>
          <e-chart v-if="columnSvgChartInitOptions" :options="columnSvgChartInitOptions" :customSeriesOptions="columnSvgChartCustomSeriesOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>象形图-图片柱图</span>
            </div>
          </template>
          <e-chart v-if="columnImgChartInitOptions" :options="columnImgChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>象形图-svg条图</span>
            </div>
          </template>
          <e-chart v-if="barSvgChartInitOptions" :options="barSvgChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>三维图-柱图</span>
            </div>
          </template>
          <e-chart v-if="column3dChartInitOptions" :options="column3dChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>折柱混合图-三维圆柱图</span>
            </div>
          </template>
          <e-chart v-if="lineColumn3dChartInitOptions" :options="lineColumn3dChartInitOptions" :height="240"></e-chart>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-row {
  margin-top: calc(0px - var(--el-space));

  .el-col {
    margin-top: var(--el-space);
  }
}

.el-card.no-padding {
  :deep(.el-card__body) {
    padding: 0;
  }
}
</style>
